<template>
  <div class="login-container">
    <!-- 动态背景 -->
    <div class="animated-background">
      <div class="gradient-orb orb-1"></div>
      <div class="gradient-orb orb-2"></div>
      <div class="gradient-orb orb-3"></div>
      <div class="gradient-orb orb-4"></div>
      <div class="gradient-orb orb-5"></div>
      <div class="floating-particles">
        <div v-for="i in 30" :key="i" :class="`particle particle-${i}`"></div>
      </div>
    </div>

    <!-- 登录卡片 -->
    <div class="login-card" v-motion :initial="{ opacity: 0, y: 50, scale: 0.9 }"
      :enter="{ opacity: 1, y: 0, scale: 1, transition: { duration: 800, ease: 'easeOut' } }">
      <div class="card-glow"></div>

      <div class="login-header" v-motion :initial="{ opacity: 0, y: -20 }"
        :enter="{ opacity: 1, y: 0, transition: { delay: 200, duration: 600 } }">
        <div class="logo-container">
          <div class="logo-ring">
            <!-- <div class="logo-inner">🐉</div> -->
            <svg t="1751042067723" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              width="65" height="65">
              <path
                d="M513.172967 914.032423h5.767257l14.496081 31.797853 17.379709-14.418144 2.883629-66.479337 37.565111 20.263339a374.092397 374.092397 0 0 0 75.208159-112.773271 593.170256 593.170256 0 0 0 20.263339-138.803866l28.914224-17.379709c5.767258-14.418144 5.767258-20.263338-5.767257-20.263339-20.263338 11.612451-60.712079 31.797854-77.935916 43.33237v43.332369l-14.418145 2.883629-8.650886 28.914225-31.797854-14.418145-43.332369 69.440901h-5.767258l-14.418145-37.565111-14.418144 37.565111h-5.767258l-43.410305-69.440901-31.797854 14.418145-5.845194-23.380775-20.185402-5.767258v-43.332369c-17.301773-11.612451-57.82845-31.797854-77.935916-43.332369-11.612451 0-14.418144 5.767258-2.883629 20.263338l28.914225 17.379709a654.661694 654.661694 0 0 0 20.263338 138.803866 302.781034 302.781034 0 0 0 75.208159 112.773271l37.565112-20.263338 2.883629 66.479336 17.379709 14.418144 14.49608-31.797853h5.767258z m0-688.252074a449.846107 449.846107 0 0 1 92.587868 115.656899c0 54.944821 40.44874 130.15298 112.695334 92.587868 34.759419-23.380775 23.380775-75.208159 0-107.006013-17.301773-20.263338-31.797854-31.797854-49.099627-31.797853V17.613517c2.883629-23.380775 14.49608-23.380775 23.380775 0 11.534516 37.565112 20.263338 83.78111 34.681483 130.075044a457.172083 457.172083 0 0 0 89.626303 138.881802c89.626303 77.935916 193.748687 216.817718 193.748687 271.840475v167.796027a316.575691 316.575691 0 0 0-101.316691 86.742675 1165.687495 1165.687495 0 0 0-60.712078 121.502093h-17.379709a166.081437 166.081437 0 0 1 0-109.967578c20.263338-49.099627 31.797854-109.889642 0-138.803866-20.263338-14.418144-60.712079 0-106.928077 89.626303-43.410305 89.626303-155.871832 231.313799-211.128396 248.693508-52.061192-17.379709-161.950833-155.871832-211.128397-248.693508-43.332369-89.626303-83.859046-101.316691-106.928077-89.626303-31.797854 28.914225-20.263338 89.626303 0 138.803866 11.534516 14.49608 11.534516 52.061192 0 109.967578h-20.263338a466.290585 466.290585 0 0 0-60.712078-121.502093 315.952203 315.952203 0 0 0-101.316691-86.742675V558.410838c0-54.944821 104.122384-193.748687 193.748687-271.840475a454.522262 454.522262 0 0 0 89.626303-138.881802c14.49608-49.099627 23.380775-92.509932 34.681483-130.075044 11.612451-23.380775 20.263338-23.380775 23.380775 0v277.607733c-17.301773 0-31.797854 11.612451-49.099627 31.797853-23.380775 31.797854-34.759419 83.859046 0 107.006013 72.246594 37.565112 112.77327-37.565112 112.77327-92.587868a584.51937 584.51937 0 0 1 95.081818-115.578964z m-54.944821 399.031889a87.366162 87.366162 0 0 0-37.565112-69.440901l-60.712078-34.681482a118.852272 118.852272 0 0 0 28.992161 60.712078c11.45658 23.224903 34.603547 31.953726 69.285029 43.488241z m40.526676 72.32453l-17.379709-31.797853-14.49608 5.767257a38.967958 38.967958 0 0 0 14.49608 17.37971c2.883629 0 8.728823 5.845194 17.379709 8.728822z m31.797854 0c5.767258-2.883629 14.418144-2.883629 17.301773-5.845193 5.845194-5.767258 14.49608-14.418144 14.496081-17.301774l-14.496081-11.612451z m37.565111-72.32453a168.263643 168.263643 0 0 0 69.362966-37.565111 119.319887 119.319887 0 0 0 28.914224-60.712079 656.999772 656.999772 0 0 0-60.712078 34.759419 68.661542 68.661542 0 0 0-37.487176 63.595707z"
                fill="url(#logoGradient)" p-id="9739"></path>
              <defs>
                <linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                  <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
                  <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
                </linearGradient>
              </defs>
            </svg>
          </div>

        </div>
        <h1>JU LONG TECHNOLOGY</h1>
        <p>欢迎来到聚龙后台管理系统</p>
      </div>

      <div class="login-form" v-motion :initial="{ opacity: 0, y: 20 }"
        :enter="{ opacity: 1, y: 0, transition: { delay: 400, duration: 600 } }">
        <n-form ref="formRef" :model="formData" :rules="rules" size="large">
          <n-form-item path="username">
            <div class="input-wrapper">
              <n-input v-model:value="formData.username" placeholder="请输入用户名" class="modern-input">
                <template #prefix>
                  <n-icon class="input-icon">
                    <PersonOutline />
                  </n-icon>
                </template>
              </n-input>
            </div>
          </n-form-item>

          <n-form-item path="password">
            <div class="input-wrapper">
              <n-input v-model:value="formData.password" type="password" placeholder="请输入密码" class="modern-input"
                show-password-on="mousedown">
                <template #prefix>
                  <n-icon class="input-icon">
                    <LockClosedOutline />
                  </n-icon>
                </template>
              </n-input>
            </div>
          </n-form-item>

          <n-form-item>
            <n-button type="primary" size="large" block :loading="loading" @click="handleLogin" class="login-button">
              <span v-if="!loading">进入系统</span>
              <span v-else>正在验证...</span>
            </n-button>
          </n-form-item>
        </n-form>

        <div class="login-footer">
          <p>请使用管理员账号登录</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useMessage } from 'naive-ui'
import { PersonOutline, LockClosedOutline } from '@vicons/ionicons5'
import { useAuthStore } from '@/store'
import { loginAPI } from '@/api/login'

const router = useRouter()
const message = useMessage()
const authStore = useAuthStore()

const formRef = ref()
const loading = ref(false)

const formData = reactive({
  username: '',
  password: ''
})

const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ]
}

const handleLogin = async () => {
  try {
    // 1. 验证表单
    await formRef.value?.validate()
    loading.value = true

    const params = {
      usr: formData.username,
      enAcross: formData.password
    }
    // 2. 调用后台登录接口
    const res = await loginAPI.login(params)
    console.log(res)

    if (res.code === 200 && res.msg === '登录成功') {
      const authStoreParam = {
        token: '',
        userInfo: {
          id: '',
          username: '',
          email: '',
          role: '',
          avatar: '',
          phone: '',
          department: '',
          bio: '',
          permissions: '',
          lastLoginTime: '',
        }
      }
      authStoreParam.token = new Date().toString() // @ts-ignore
      authStoreParam.userInfo.id = res.data.id // @ts-ignore
      authStoreParam.userInfo.username = res.data.usr // @ts-ignore
      authStoreParam.userInfo.email = res.data.email // @ts-ignore
      authStoreParam.userInfo.role = res.data.role // @ts-ignore
      authStoreParam.userInfo.avatar = res.data.avatar // @ts-ignore
      authStoreParam.userInfo.phone = res.data.tel // @ts-ignore
      authStoreParam.userInfo.department = res.data.isFrozen // @ts-ignore
      authStoreParam.userInfo.bio = res.data.isFrozen // @ts-ignore
      authStoreParam.userInfo.permissions = res.data.isFrozen
      authStoreParam.userInfo.lastLoginTime = new Date().toString()

      authStore.login(authStoreParam)// 5. 更新状态管理
      // @ts-ignore
      // message.success(`欢迎回来，${res.data.usr}！`)
      router.push('/')// 7. 跳转到首页
    } else if (res.code === 200 && res.msg === '密码错误') {
      message.warning(`密码错误！`)
      formData.password = ''
      return
    } else { // 用户不存在
      formData.username = ''
      formData.password = ''
      message.error(`用户不存在!`)

      return
    }

    // 3. 判断登录是否成功
    // if (res.code === 200 && res.data) {
    //   // 4. 登录成功 - 保存用户信息和token
    //   const loginData = {
    //     token: res.data.token,
    //     userInfo: {
    //       id: String(res.data.userInfo.id),
    //       username: res.data.userInfo.username,
    //       email: res.data.userInfo.email || '',
    //       role: res.data.userInfo.role || 'user',
    //       avatar: res.data.userInfo.avatar || '',
    //       phone: res.data.userInfo.phone || '',
    //       department: res.data.userInfo.department || '',
    //       bio: res.data.userInfo.bio || ''
    //     }
    //   }

    // authStore.login(loginData)// 5. 更新状态管理
    // message.success(`欢迎回来，${loginData.userInfo.username}！`)// 6. 显示成功消息
    // router.push('/')// 7. 跳转到首页

    // } else {
    //   message.error(res.message || res.msg || '登录失败，请检查用户名和密码')
    // }

  } catch (error: any) {
    console.error('登录失败:', error)

    // 处理不同类型的错误
    if (error.message) {
      message.error(error.message)
    } else if (error.response?.data?.message) {
      message.error(error.response.data.message)
    } else {
      message.error('网络连接失败，请稍后重试')
    }
  } finally {
    // 无论成功失败，都要停止加载状态
    loading.value = false
  }
}
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* 动态背景 */
.animated-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b, #fb5607);
  background-size: 400% 400%;
  animation: gradientShift 8s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* 渐变球体 */
.gradient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.6;
  animation: float 6s ease-in-out infinite;
}

.orb-1 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, #ff006e, transparent);
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.orb-2 {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, #8338ec, transparent);
  top: 60%;
  right: 20%;
  animation-delay: 2s;
}

.orb-3 {
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, #3a86ff, transparent);
  bottom: 20%;
  left: 30%;
  animation-delay: 4s;
}

.orb-4 {
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, #06ffa5, transparent);
  top: 30%;
  right: 10%;
  animation-delay: 1s;
}

.orb-5 {
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, #ffbe0b, transparent);
  bottom: 40%;
  right: 40%;
  animation-delay: 3s;
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  33% {
    transform: translateY(-20px) rotate(120deg);
  }

  66% {
    transform: translateY(20px) rotate(240deg);
  }
}

/* 浮动粒子 */
.floating-particles {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: white;
  border-radius: 50%;
  animation: particleFloat 15s linear infinite;
  opacity: 0.7;
}

@keyframes particleFloat {
  from {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }

  10% {
    opacity: 0.7;
  }

  90% {
    opacity: 0.7;
  }

  to {
    transform: translateY(-100vh) rotate(360deg);
    opacity: 0;
  }
}

/* 生成不同的粒子动画 */
.particle:nth-child(odd) {
  animation-duration: 20s;
  width: 2px;
  height: 2px;
}

.particle:nth-child(3n) {
  animation-duration: 25s;
  width: 3px;
  height: 3px;
}

/* 登录卡片 */
.login-card {
  width: 600px;
  padding: 0;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
  z-index: 10;
}

.card-glow {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5);
  border-radius: 24px;
  z-index: -1;
  animation: borderGlow 3s ease-in-out infinite alternate;
}

@keyframes borderGlow {
  0% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}

.login-header {
  text-align: center;
  padding: 40px 40px 20px;
  color: white;
}

.logo-container {
  margin-bottom: 20px;
}

.logo-ring {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  border-radius: 50%;
  background: linear-gradient(45deg, #ff006e, #8338ec);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: logoSpin 10s linear infinite;
  box-shadow: 0 0 30px rgba(255, 0, 110, 0.5);
}

@keyframes logoSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.logo-inner {
  font-size: 36px;
  animation: logoSpin 10s linear infinite reverse;
}

.login-header h1 {
  margin: 0 0 8px 0;
  font-size: 32px;
  font-weight: 700;
  background: linear-gradient(45deg, #fff, #06ffa5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.login-header p {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
}

.login-form {
  padding: 20px 40px 40px;
}

.input-wrapper {
  width: 100%;
  margin-bottom: 20px;
  position: relative;
}

.modern-input {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 12px !important;
  transition: all 0.3s ease !important;
}

.modern-input:hover {
  border-color: rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.1) !important;
}

.modern-input:focus-within {
  border-color: #06ffa5 !important;
  box-shadow: 0 0 30px rgba(6, 255, 165, 0.3) !important;
}

.input-icon {
  color: rgba(255, 255, 255, 0.7);
}

.login-button {
  height: 50px !important;
  border-radius: 12px !important;
  background: linear-gradient(45deg, #ff006e, #8338ec) !important;
  border: none !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease !important;
}

.login-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.login-button:hover::before {
  left: 100%;
}

.login-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(255, 0, 110, 0.4) !important;
}

.login-footer {
  text-align: center;
  margin-top: 20px;
}

.login-footer p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  margin: 0;
}

/* 响应式 */
@media (max-width: 768px) {
  .login-card {
    width: 90%;
    margin: 20px;
  }

  .login-header,
  .login-form {
    padding: 30px 30px;
  }
}

/* 粒子随机位置 */
.particle-1 {
  left: 10%;
  animation-delay: 0s;
}

.particle-2 {
  left: 20%;
  animation-delay: 0.5s;
}

.particle-3 {
  left: 30%;
  animation-delay: 1s;
}

.particle-4 {
  left: 40%;
  animation-delay: 1.5s;
}

.particle-5 {
  left: 50%;
  animation-delay: 2s;
}

.particle-6 {
  left: 60%;
  animation-delay: 2.5s;
}

.particle-7 {
  left: 70%;
  animation-delay: 3s;
}

.particle-8 {
  left: 80%;
  animation-delay: 3.5s;
}

.particle-9 {
  left: 90%;
  animation-delay: 4s;
}

.particle-10 {
  left: 15%;
  animation-delay: 4.5s;
}

.particle-11 {
  left: 25%;
  animation-delay: 5s;
}

.particle-12 {
  left: 35%;
  animation-delay: 5.5s;
}

.particle-13 {
  left: 45%;
  animation-delay: 6s;
}

.particle-14 {
  left: 55%;
  animation-delay: 6.5s;
}

.particle-15 {
  left: 65%;
  animation-delay: 7s;
}

.particle-16 {
  left: 75%;
  animation-delay: 7.5s;
}

.particle-17 {
  left: 85%;
  animation-delay: 8s;
}

.particle-18 {
  left: 95%;
  animation-delay: 8.5s;
}

.particle-19 {
  left: 5%;
  animation-delay: 9s;
}

.particle-20 {
  left: 12%;
  animation-delay: 9.5s;
}

.particle-21 {
  left: 22%;
  animation-delay: 10s;
}

.particle-22 {
  left: 32%;
  animation-delay: 10.5s;
}

.particle-23 {
  left: 42%;
  animation-delay: 11s;
}

.particle-24 {
  left: 52%;
  animation-delay: 11.5s;
}

.particle-25 {
  left: 62%;
  animation-delay: 12s;
}

.particle-26 {
  left: 72%;
  animation-delay: 12.5s;
}

.particle-27 {
  left: 82%;
  animation-delay: 13s;
}

.particle-28 {
  left: 92%;
  animation-delay: 13.5s;
}

.particle-29 {
  left: 18%;
  animation-delay: 14s;
}

.particle-30 {
  left: 88%;
  animation-delay: 14.5s;
}
</style>